<template>
	<div>
		<img class="nav-logo" src="http://www.duolaibei.com/Uploads/2016-10-30/5815b3504a2e9.png" alt="logo">
		<div class="handle">
			<el-popover placement="bottom" width="150" trigger="hover" popper-class="popper"
				@after-enter="popoverHandle">
				<div class="handle-btn" @click="$router.push('/add-user')" v-if="identity === 'super'">添加商户</div>
				<div class="handle-btn" @click="quit">退出/切换账号</div>
				<div class="handle-box" slot="reference"></div>
			</el-popover>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				identity: '',
			};
		},
		methods: {
			//防止logo页层级被遮挡，因为popper层级会叠加
			popoverHandle() {
				document.querySelector(".popper").style.zIndex = 1000;
			},
			quit() {
				let token = this.$store.state.token;
				const _this = this;
				_this.$axios({
					url: "admin/login/loginOut",
					data: {
						token: token
					},
					success(res) {
						_this.$store.commit("removeUserSign");
						_this.$router.push({
							path: "/login"
						});
						history.pushState(null, null, document.URL);
						window.addEventListener(
							"popstate",
							function(e) {
								history.pushState(null, null, document.URL);
							},
							false
						);
					},
				});
			},
		},
		watch: {
			$route(to, from) {
				this.identity = this.$store.state.userType;
			},
		},
		created(e) {

		},
	};
</script>

<style scoped>
	.fix-menu {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 10;
	}

	.nav-logo {
		height: 30px;
		margin: 15px 0 0 65px;
	}

	.el-menu-nav {
		width: 100%;
		height: 60px;
	}

	.el-menu-nav>.el-menu-item,
	.el-menu-nav>.el-submenu {
		padding: 0;
	}

	.logo {
		display: block;
		position: relative;
		width: 150px;
		height: 30px;
	}

	.logo img {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 70px;
		margin: auto;
	}

	.el-menu-item a {
		display: block;
		width: 100%;
		height: 100%;
		padding: 0 20px;
	}

	.el-menu-nav>.el-menu-item:hover {
		height: 58px !important;
	}

	.el-menu-nav>.el-menu-item.is-active:hover {
		height: 60px !important;
	}

	.handle {
		position: absolute;
		top: 5px;
		right: 30px;
	}

	.handle-box {
		width: 50px;
		height: 50px;
		color: #409eff;
		line-height: 50px;
		text-align: center;
		background: url(../../imgs/logo.png) center / cover no-repeat;
		border: 1px solid #409eff;
		border-radius: 50%;
		outline: none;
		cursor: pointer;
	}

	.handle-btn {
		margin: 5px 0;
		font-size: 15px;
		cursor: pointer;
	}

	.handle-btn:hover {
		color: #409eff;
	}
</style>
